<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="项目类型">
              <j-dict-select-tag v-model="queryParam.xmlxid" placeholder="请选择项目类型" dictCode="hydm"></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="项目状态">
              <j-dict-select-tag v-model="queryParam.status" placeholder="请选择项目状态" dictCode="project_status"/>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="项目编号">
              <j-input placeholder="请输入项目编号" v-model="queryParam.xmbh"></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <!--<a-button type="primary" icon="download" @click="handleExportXls('项目信息列表')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>-->
    </div>

    <!-- table区域-begin -->
    <div>
      <a-spin tip="合同生成中，请稍等..." :spinning="spinning">
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>

        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          class="j-table-force-nowrap"
          @change="handleTableChange">

          <template slot="htmlSlot" slot-scope="text">
            <div v-html="text"></div>
          </template>
          <template slot="imgSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
          </template>
          <template slot="fileSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
            <a-button
              v-else
              :ghost="true"
              type="primary"
              icon="download"
              size="small"
              @click="downloadFile(text)">
              下载
            </a-button>
          </template>

          <span slot="action" slot-scope="text, record">
            <a v-if="record.status == 1 || record.status == 0 " @click="handleEdit(record)">编辑</a>
            <a-divider v-if="record.status == 1 || record.status == 0 " type="vertical" />
            <!--<a-popconfirm title="确定提交吗?" @confirm="() => htShow(record)" v-if="record.status == 1 || record.status == 0">-->
            <a-popconfirm title="确定提交吗?" @confirm="() => handleChange(record.id,2)" v-if="record.status == 1 || record.status == 0">
              <a>提交</a>
            </a-popconfirm>
            <a-divider v-if="record.status == 1 || record.status == 0 " type="vertical" />
            <a-popconfirm title="确定删除吗？" @confirm="handleDelete(record.id)"  v-if="record.status == 1 || record.status == 0 "> <a>删除</a> </a-popconfirm>
            <a v-if="record.status > 1" @click="handleDetail(record)">详情</a>
            <!--<a-divider type="vertical" v-if="record.status > 2" />-->
            <!--<a v-if="record.status > 2" @click="viewXmxy(record)">项目协议</a>-->
            <a-divider type="vertical" v-if="record.status == 2 || record.status == 4" />
            <a-popconfirm title="确定结束项目吗?" @confirm="() => handleChange(record.id,5)" v-if="record.status == 2 || record.status == 4">
              <a>结束项目</a>
            </a-popconfirm>
            <a-divider type="vertical" v-if="record.status == 5" />
            <a-popconfirm title="确定重新激活项目?" @confirm="() => jh(record)" v-if="record.status == 5">
            <a>激活</a>
          </a-popconfirm>
          </span>

        </a-table>
      </a-spin>
    </div>
    <a-modal
      title="激活项目"
      :visible="visibleJh"
      :confirm-loading="false"
      @ok="handleOkJh"
      @cancel="handleCancelJh"
    >
      <a-form-item label="需要人数" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input-number v-model="xyrsNew" style="width: 50%;" :precision="0" :min="2" :max="100" ></a-input-number>
      </a-form-item>

    </a-modal>
    <a-modal
      title="合同"
      width="1000px"
      :visible="visibleHt"
      okText="确认签署"
      cancelText="关闭"
      @ok="startSign"
      @cancel="htClose"
      :confirm-loading="yzmspinning"
    >
      <a-spin tip="验证码发送中，请稍等..." :spinning="yzmspinning">
        <div id="ht" style="width:960px;height:600px;">
          <iframe style="width: 100%;height: 100%;" :src="htImgUrl"></iframe>
        </div>
      </a-spin>
    </a-modal>
    <a-modal
      title="验证码"
      :visible="visibleYzm"
      cancelText="关闭"
      @ok="saveCode"
      @cancel="yzmClose"
      :confirm-loading="qsspinning"
    >
      <a-spin tip="签署中，请稍等..." :spinning="qsspinning">
        <a-form-item label="请输入验证码" :labelCol="{ xs: { span: 23 }, sm: { span: 6 }}" :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 }}">
          <a-input  v-model="smscode"/>
        </a-form-item>
      </a-spin>
    </a-modal>
    <a-modal
      title="查看项目协议"
      :visible="visibleHz"
      width="1000px"
      cancelText="关闭"
      @cancel="HzClose"
      :okButtonProps="{ class:{'jee-hidden': true} }"
    >
      <div  id="hz" style="width:960px;height:600px;">
        <iframe style="width: 100%;height: 100%;" :src="hzImgUrl"></iframe>
      </div>
    </a-modal>

    <lhyg-project-modal ref="modalForm" @ok="modalFormOk"></lhyg-project-modal>
  </a-card>
</template>

<script>

  import { httpAction, getAction, postAction } from '@/api/manage'
  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import LhygProjectModal from './modules/LhygProjectModal'
  import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
  import JInput from '@/components/jeecg/JInput'
  import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
  import pdf from 'vue-pdf'

  let recordBean;
  export default {
    name: 'LhygProjectList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      JDictSelectTag,
      LhygProjectModal,
      JInput,
      JAreaLinkage,
      pdf,
    },
    data () {
      return {
        description: '项目信息管理页面',
        xyrsNew:0, // 新的需要人数
        records:[], // 激活项目的数据
        visibleJh:false, // 激活项目窗口展示
        queryParam: {
            xmlx: '',
            status: '',
            xmbh: '',
        },
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
              title:'项目编号',
              align:"center",
              dataIndex: 'xmbh',
              customRender:function (text,record, index) {
                  if(record.status < 1) {
                      return ""
                  } else {
                      return text
                  }
              }
          },
          {
              title:'项目协议编号',
              align:"center",
              dataIndex: 'xmxybh',
              customRender:function (text,record, index) {
                  if(record.status < 1) {
                      return ""
                  } else {
                      return text
                  }
              }
          },
          {
              title:'项目名称',
              align:"center",
              dataIndex: 'xmmc'
          },
          {
            title:'项目类型',
            align:"center",
            dataIndex: 'xmlxid_dictText'
          },
          // {
          //     title:'任务总金额',
          //     align:"center",
          //     dataIndex: 'rwzje'
          // },
          {
            title:'单人结算金额',
            align:"center",
            dataIndex: 'drjsje'
          },
          {
              title:'需要人数',
              align:"center",
              dataIndex: 'xyrs'
          },
          {
            title:'已报名人数',
            align:"center",
            dataIndex: 'ybmrs'
          },
          {
            title:'已录用人数',
            align:"center",
            dataIndex: 'ylyrs'
          },
          {
              title:'项目起止日期',
              align:"center",
              dataIndex: 'xmqrq',
              customRender:function (text,record, index) {
                  return record.xmqrq + "~" + record.xmzrq;
              }
          },
          {
              title:'工作城市',
              align:"center",
              dataIndex: 'gzcsmc',
          },
          {
            title:'项目状态',
            align:"center",
            dataIndex: 'status_dictText'
          },
          {
              title:'发起时间',
              align:"center",
              dataIndex: 'fbsj',
              customRender:function (text) {
                  return !text?"":(text.length>10?text.substr(0,10):text)
              }
          },
          {
              title:'创建用户',
              align:"center",
              dataIndex: 'createBy'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/project/lhygProject/list",
          delete: "/project/lhygProject/delete",
          deleteBatch: "/project/lhygProject/deleteBatch",
          exportXlsUrl: "/project/lhygProject/exportXls",
          updateStatus: "/project/lhygProject/updateStatus",
          qyfbxm:"/project/lhygProject/qyfbxm",
          getStartSign:"/project/lhygProject/qyStartSign",
          getSms:"/project/lhygProject/qySmsCode",
          qytoSign:"/project/lhygProject/qytoSign",
          queryKpInfo: "project/lhygProject/queryKpInfo",
          getErrSkr: "/project/lhygProject/getErrSkr",
        },
        dictOptions:{},
        spinning: false,
        yzmspinning: false,
        qsspinning: false,
        visibleHt: false,
        visibleYzm: false,
        htImgUrl:'',
        pageNum: 1,
        loadedRatio: 0,
        pageTotalNum: 1,
        xybh:'',
        smscode: '',
        xmmc: '',
        gsmc: '',
        lxrxm: '',
        flag: false,
        visibleHz: false,
        hzImgUrl: '',
      }
    },
    created() {
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig(){
      },
      handleDetail(record){
          this.$refs.modalForm.detail(record);
          this.$refs.modalForm.title="详情";
          this.$refs.modalForm.disableSubmit = true;
      },
      htShow(record){
          const that = this;
          that.spinning = true;
          postAction(that.url.queryKpInfo, null).then((res)=>{
              if(res.success){
                  const result = res.result;
                  if(result.corfStatus == "1"){
                      that.spinning = false
                      this.$message.warning("企业信息审核中，暂时不能提交项目！");
                      this.flag = false;
                  } else if(result.corfStatus == "0"){
                      that.spinning = false
                      this.$message.warning("企业信息审核未通过，暂时不能提交项目，请调整企业信息！");
                      this.flag = false;
                  } else if(result.corfStatus == "2"){
                      that.spinning = false
                      this.$message.warning("未签署合同，暂时不能提交项目，请前往企业设置签署合同！");
                      this.flag = false;
                  } else {
                      let formData=new FormData();
                      formData.append('id',record.id);
                      formData.append('xmlxid',record.xmlxid);
                      formData.append('type','1');
                      postAction(this.url.getErrSkr, formData).then(res => {
                          if (res.success) {
                              /*if(res.result == '1'){
                                  that.spinning = false
                                  this.$message.warning("未指派任何个体工商户列表，无法提交审核");
                              } else */
                              if(res.result == '5'){
                                  that.spinning = false
                                  this.$message.warning("任务接收者列表中存在异常用户（黑名单），无法提交！");
                              } else {
                                  record.fwfl = result.ptzhfwfl;
                                  record.gsmc = result.gsmc;
                                  record.sh = result.sh;
                                  record.lxrsj = result.lxrsj;
                                  record.zcdz = result.zcdz;
                                  record.khh = result.khh;
                                  record.kh = result.kh;
                                  record.htbh = result.htbh;
                                  record.xmlx = record.xmlxid_dictText;
                                  postAction(this.url.qyfbxm,record).then((res)=>{
                                      that.spinning = false
                                      if(res.success){
                                          if(res.result.zpfs !== '1'){
                                            that.$message.success("提交成功");
                                            that.searchQuery()  // 刷新列表
                                          }else{
                                            that.htImgUrl = res.result.htpdf;
                                            that.xybh = res.result.xmxybh;
                                            this.visibleHt = true;
                                          }
                                      }else{
                                          this.visibleHt = false;
                                          that.$message.warning(res.message);
                                      }
                                  })
                                  this.pageNum = 1
                              }
                          }
                      }).catch((e) => {
                          this.$message.warning(res.message);
                      });
                  }
              }
          });
      },
      htClose(){
          this.yzmspinning = false;
          this.visibleHt = false
      },
      yzmClose(){
          this.smscode = '';
          this.qsspinning = false;
          this.visibleYzm = false
      },
      // 上一页
      prePage() {
          let page = this.pageNum
          page = page > 1 ? page - 1 : this.pageTotalNum
          this.pageNum = page
          document.getElementById('ht').scrollTop = 0;
      },

      // 下一页
      nextPage() {
          let page = this.pageNum
          page = page < this.pageTotalNum ? page + 1 : 1
          this.pageNum = page
          document.getElementById('ht').scrollTop = 0;
      },
      startSign(){
        const that = this;
        that.yzmspinning = true;
        getAction(that.url.getStartSign, {xybh: that.xybh}).then((res) => {
            if (res.success) {
                recordBean = res.result;
                that.sendMessage();
            } else {
                that.$message.error(res.message);
            }
        });
      },
      sendMessage(){
          const that = this;
          that.visibleYzm = true;
          postAction(that.url.getSms, recordBean).then((res) => {
              that.yzmspinning = false;
              if (res.success) {
                  that.$message.success("验证码发送成功")
              }else{
                  that.$message.error("验证码发送失败")
              }
          });
      },
      saveCode(){
          const that = this;
          that.qsspinning = true;
          getAction(that.url.qytoSign, {smscode:that.smscode, id:recordBean.id}).then((res) => {
              if (res.success){
                  that.$message.success("签署成功");
                  that.updateStatus();
                  setTimeout(function () {
                      that.smscode = '';
                      that.visibleYzm = false
                      that.visibleHt = false;
                      that.qsspinning = false;
                      that.loadData()
                  }, 1400)
              }else{
                  that.qsspinning = false;
                  that.$message.error(res.message)
              }
          });
      },
      updateStatus(){
          var that = this;
          let formData=new FormData();
          //formData.append('id',recordBean.id);
          formData.append('id','1723955357226139649');
          formData.append('status',2);
          postAction(that.url.updateStatus, formData).then((res) => {
              if (res.success) {
                  that.$message.success(res.message);
                  that.searchQuery()  // 刷新列表
              } else {
                  that.$message.warning(res.message);
              }
          });
      },
      viewXmxy(record){
          this.hzImgUrl = record.htpdf;
          this.visibleHz = true;
      },
      HzClose(){
          this.visibleHz = false;
      },
      handleOkJh(){
        let that = this;
        if(that.records.xyrs >= that.xyrsNew){
          that.$message.error("所需人数必须大于项目原来的所需人数,原来的需要人数是"+that.records.xyrs);
          return;
        }

        let formData=new FormData();
        formData.append('id',that.records.id);
        formData.append('xyrs',that.xyrsNew);

        postAction("/project/lhygProject/jh",formData).then(res => {
          if(res.code==200){
            that.$message.success(res.message);
            that.searchQuery();
            that.visibleJh = false
          }else{
            that.$message.error(res.message)
          }
        }).catch(err => {
          that.$message.success("激活失败")
        });
      },
      handleCancelJh(){
        this.visibleJh = false
      },
      jh(record){
        let that = this;
        that.records = record;
        that.xyrsNew = '';
        that.visibleJh = true
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>